<template>
  <div class="case-container">
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="案例搜索" tab="案例搜索">
        <case-search :userName="userName"></case-search>
      </a-tab-pane>
      <a-tab-pane key="案例录入" tab="案例录入">
        <case-import :userName="userName"></case-import>
      </a-tab-pane>
      <a-tab-pane key="案例审核" tab="案例审核">
        <case-verify :userName="userName"></case-verify>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import CaseSearch from './components/caseSearch'
  import CaseImport from './components/caseImport'
  import CaseVerify from './components/caseVerify'
  export default {
    name: "Case",
    components: {
      CaseSearch,
      CaseImport,
      CaseVerify,
    },
    data () {
      return {
        userName: '',
      };
    },
    methods: {
      getLocalStorageData () {
        const phone = localStorage.getItem('phone');
        this.userName = phone;
        if (!phone) {
          this.$router.push('/');
        }
      },
      callback (key) {
      },
    },
    created () {
      this.getLocalStorageData();
    }
  }
</script>

<style scoped="scoped">
  .case-container /deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
    margin-right: 40px !important;
    margin-left: 10px;
    font-size: 15px;
    background: #fff;
    border: none;
  }
  .case-container /deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
    height: 35px;
    line-height: 35px;
    width: 100px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    border-color: #e8e8e8;
    border-radius: 4px;
    border-bottom: 1px solid #fff;
  }
  .case-container /deep/  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
    height: 60px;
  }
  .case-container /deep/ .ant-tabs-nav-scroll {
    margin-top: 10px;
  }
</style>
